<template>
        <div id="detail">
        <!-- 详情页顶部导航条 -->
        <detailnavbar></detailnavbar>
        <Scroll class="content" ref="scroll">
        <!-- 详情页轮播图 -->
        <detailswiper :topImages = 'topImages'></detailswiper>
        <!-- 弹窗 -->
        <alertinfo :style="{display:dispalyStsates}"></alertinfo>
        <prointro :goods='goods'></prointro>
        <detailshopinfo :shopInfo='shopInfo'></detailshopinfo>
        <detailmore :shopInfo='shopInfo'></detailmore>
        <p class="wu">暂时没有更多了哦.....</p>
        </Scroll>
        <bottombar @addcart='addToCart'></bottombar>
        <backTop @click.native="backClick" class="backTop"></backTop>
    </div>
</template>
<script>
import detailnavbar from './detailcomponents/datailnavbar'
import {getdetail} from '../../network/detail.js'
import detailswiper from './detailcomponents/detailswiper'
import prointro from './detailcomponents/detailprointro'
import detailshopinfo from './detailcomponents/detailshopinfo'
import detailmore from './detailcomponents/detailmore'
import backTop from '../../components/content/backTop/backTop'
import bottombar from './detailcomponents/detailbottombar'
import alertinfo from './detailcomponents/alertinfo'
import Scroll from '../../components/common/better-scroll/better-scroll'
export default {
    name:'detail',
    components:{

        detailnavbar,
        detailswiper,
        prointro,
        detailshopinfo,
        detailmore,
        Scroll,
        backTop,
        alertinfo,
        bottombar
    },
    data(){
        return {
            iid:null,
            dispalyStsates:'none',
            // 轮播图数据
            topImages:[],
            goods:{
                iid:'',
                title:'',
                desc:'',
                discount:'',
                newPrice:'',
                oldPrice:'',
                lowPrice:'',
                columns:[],
                services:[],
                realPrice:''
            },
            shopInfo:{
                shopLogo:'',
                name:'',
                cGoods:0,
                cSells:0,
                score:[],
                shopUrl:'',
                desc:'',
                key:'',
                list:[]
            },
        }
    },
    methods:{
        alertDia(){
            this.dispalyStsates = 'block'
            window.setTimeout(()=>{
                this.dispalyStsates = 'none'
            },1500)
        }
        ,
        backClick(){
            this.$refs.scroll.scrollTo(0,0,800)
        },
        addToCart(){
            // 点击加入购物车
            this.alertDia()
            // 获取购物车需要展示的信息 图片 标题 描述 价格
            const product= {}
            // 图片
            product.image = this.topImages[0]
            // 标题
            product.title = this.goods.title
            // 描述
            product.desc = this.goods.desc
            // 价格
            product.lowPrice = this.goods.lowNowPrice
            // 商品id
            product.iid = this.goods.iid
            // 通过mutation提交数据
            this.$store.commit('addCart',product)
        }
    },
    activated(){
        // console.log(this.$refs.scroll.position.y);
         this.iid = this.$route.params.iid
        // console.log(this.$route);
        getdetail(this.iid).then(res=>{
                // 详情页全部数据
                // 1 
                const data = res.data.result
                // console.log('data'+data);
                this.topImages = data.itemInfo.topImages

        }),
        getdetail(this.iid).then(res=>{
                const data = res.data.result
             // 获取商品信息
                this.goods.iid =        res.data.iid
                this.goods.title =      data.itemInfo.title
                this.goods.desc =       data.itemInfo.desc
                this.goods.newPrice =   data.itemInfo.price
                this.goods.lowPrice =   data.itemInfo.lowPrice
                this.goods.lowNowPrice =   data.itemInfo.lowNowPrice
                this.goods.oldPrice =   data.itemInfo.oldPrice
                // console.log(data.itemInfo.lowNowPrice);
                // console.log(data.itemInfo.lowPrice);
                this.goods.discount =   (data.itemInfo.lowNowPrice/data.itemInfo.lowPrice*10).toFixed(1)
                // console.log(data.columns);
                this.goods.columns =    data.columns
                this.goods.services =   data.shopInfo.services
                // console.log(data.shopInfo.services);
                this.goods.realPrice =  data.itemInfo.lowNowPrice

                // 商家信息
                this.shopInfo.shopLogo = data.shopInfo.shopLogo
                this.shopInfo.name = data.shopInfo.name
                this.shopInfo.cGoods = data.shopInfo.cGoods
                this.shopInfo.cSells = data.shopInfo.cSells
                this.shopInfo.score = data.shopInfo.score
                this.shopInfo.shopUrl = data.shopInfo.shopUrl

                // 商品详情
                this.shopInfo.desc = data.detailInfo.desc
                this.shopInfo.key = data.detailInfo.detailImage[0].key
                this.shopInfo.list = data.detailInfo.detailImage[0].list


                // 尺码信息
                this.shopInfo.tables = data.itemParams.rule.tables
                // console.log(data.itemParams.rule.tables);

                // 商品参数
                this.shopInfo.set = data.itemParams.info.set
                // console.log(data.itemParams.info.set);
        })
        
    },
   
}
</script>
<style scoped>
    #detail{
        position: absolute;
        z-index: 12;
        background:white;
        height: 100vh;
    }
    .content{
        /* height: 170px; */
        height: calc(100% - 44px);
        background-color: #fff;
    }
    .wu{
        padding: 10px;
        text-align: center;
        font-size: 20px;
    }
</style>